@import url("../../style.less");

.page{
	height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    .student-info{
        background-color: #f1f5f9;
        width: 94%;
        margin: 16rpx auto;
        height: 200rpx;
        border-radius: 30rpx;
        border: 4rpx solid #a5d4f0;
        position: relative;
        .basic-info{
            margin: 4rpx 24rpx 0;
            border-bottom: 2rpx dashed #a5d4f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .avator{
                margin: 16rpx 10rpx 8rpx;
            }
            .name{
                flex: 1;
                font-size: 28rpx;
                color: #313131;
                margin-left: 20rpx;
                .phone{
                    font-size: 24rpx;
                    color: #696969;
                }
            }
            .age{
                font-size: 28rpx;
            }
        }
        .basic-foot{
            font-size: 24rpx;
            padding: 10rpx 20rpx;
            color: #969696;
            span{
                margin-right: 30rpx;
                position: relative;
                padding-left: 12rpx;
                &::before{
                    content: ' ';
                    position: absolute;
                    width: 6rpx;
                    height: 22rpx;
                    background-color: #5ebaf1;
                    left: 0;
                    top: 8rpx;
                }
            }
        }
    }
    .block-10{
        height: 20rpx;
        background-color: #f1f5f9;
    }
    .screen-form{
        height: calc(100vh - 260rpx);
        overflow: auto;
        .tab-bar{
            padding-top: 20rpx;
            .tab-wrapper{
                background-color: #efefef;
                padding: 6rpx;
                border-radius: 35rpx;
                width: 460rpx;
                margin: auto;
                display: flex;
                .btn{
                    flex: 1;
                    height: 56rpx;
                    font-size: 26rpx;
                    color: #313131;
                    text-align: center;
                    line-height: 56rpx;
                    &.active{
                        background-color: #0088dc;
                        border-radius: 50rpx;
                        color: #fff;
                    }
                }
            }
        }
        .form-item{
            box-shadow: 0 0 8px 1px #0505051e;
            border-radius: 12rpx;
            padding: 10rpx 20rpx;
            margin: 26rpx 44rpx;
            &.no-shadow{
                box-shadow: none;
                padding-left: 0px;
            }
            .uni-forms-item{
                margin-bottom: 0;
                ::v-deep.uni-easyinput__content{
                    background-color: #f1f2f3!important;
                }
            }
            .item-input{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10rpx 0;
                .label{
                    text-align: left;
                    font-size: 14px;
                    color: #606266;
                    width: 70px;
                }
                ::v-deep.checklist-group{
                    justify-content: flex-end;
                    .checklist-box{
                        margin-right: 8rpx!important;
                    }
                }
                ::v-deep uni-slider{
                    margin: 6rpx 0!important;
                    width: 180px;
                }
            }
            ::v-deep.uni-data-checklist{
                .checklist-group{
                    justify-content: space-between;
                    uni-label.is--tag{
                        padding: 12rpx 20rpx!important;
                        width: 240rpx;
                        &.is-checked{
                            background-color: #68c4fa;
                            border-color: #68c4fa;
                        }
                        .checklist-text{
                            font-size: 12px!important;
                        }
                    }
                }
                
                &.row-2{
                    uni-label.is--tag{
                        width: 240rpx;
                    }
                }
                &.row-3{
                    uni-label.is--tag{
                        width: 140rpx;
                    }
                }
            }
        }
        .form-title{
            margin: 0 40rpx;
            color: #313131;
            font-size: 26rpx;
            position: relative;
            padding-left: 20rpx;
            &::before{
                content: ' ';
                position: absolute;
                width: 6rpx;
                height: 22rpx;
                background-color: #75b6fd;
                left: 0;
                top: 10rpx;
            }
        }
    }
    .form-foot{
        padding: 18rpx 0;
        .submit-btn{
            width: 220px;
            line-height: 2.15;
            border-radius: 40rpx;
            background-color: #0088dc;
        }
    }
}